<template>
    <header>
        <!-- LOGO -->
        <div class="logo">
            <img src="./img/logo.png" alt="">
        </div>

        <!-- 前进后退箭头 -->
        <div class="pageSkip">
            <el-button type="primary" circle :icon="ArrowLeftBold" @click="router.back()" />
            <el-button type="primary" circle :icon="ArrowRightBold" @click=router.forward() />
        </div>

        <!-- 搜索框 -->
        <div class="search">
            <!-- 弹出框 -->
            <el-popover placement="bottom" :width="320" trigger="click">
                <!-- 搜索框 -->
                <template #reference>
                    <el-input v-model.trim="keywords" class="search-input" placeholder="请输入内容" :prefix-icon="Search"
                        @keyup.enter.native="toSearch" />
                </template>

                <!-- 热搜列表 -->
                <div class="hotSearch">
                    <div class="title">热搜榜</div>
                    <div class="item" v-for="(item, index) in hostSearch" @click="goHotSearch(item.searchWord )" >
                        <div class="index">{{ index + 1 }}</div>
                        <div class="searchWord" >{{ item.searchWord }}</div>
                    </div>
                </div>
            </el-popover>
        </div>
    </header>
</template>

<script setup lang="ts">
import router from '../../router/index'
import { ArrowLeftBold, ArrowRightBold, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
// 引入热门歌曲
import hostSearchApi from '../../api/publics/search/hotsearch';

// 定义搜索关键字
let keywords = ref('');

// 定义一个热搜容器来装后台返回的数据
let hostSearch = ref();

// 热搜歌曲
onMounted(async () => {
    let res = await hostSearchApi()
    // console.log(res);
    hostSearch.value = res.data
})

// 跳转热搜
function goHotSearch(searchWord: string) {
    router.push({
        name: 'searchSongs',
        params: {
          keywords: searchWord,
        },
    })
}

// 回车搜索
function toSearch() {
    // 将当前搜索框中的关键字保存在 session 中
    sessionStorage.setItem("keywords",keywords.value)
    // 判断搜索关键字是否为空，为空不进行搜索并进行提示
    if (keywords.value !== '') {
        // 跳转页面，并传递搜索的关键字
        router.push({
            name: 'searchSongs',
            params: {
                keywords: keywords.value
            }
        })
    } else {
        ElMessage.warning('请输入有效的搜索关键字 ！')
    }
}
</script>

<style lang="less" scoped>
header {
    height: 100%;
    width: 100%;
    display: flex;
    background-color: #ec4141;
    align-items: center;
    position: relative;

    .logo {
        margin: 0 25px;

        img {
            height: 50px;
            vertical-align: middle;
        }
    }

    // 前进后退样式
    .pageSkip {
        margin: 15px;

        .el-button {
            background-color: #e13e3e;
            border: none;
        }
    }

    // 搜索框
    .search {
        margin: 15px;

        :deep(.search-input) {
            .el-input__wrapper {
                border-radius: 20%;
                background-color: #e13e3e;
                box-shadow: none;

                input {
                    color: white;

                    &::-webkit-input-placeholder {
                        color: rgba(255, 255, 255);
                    }
                }

                .el-input__prefix {
                    color: white;
                }
            }
        }


        
    }


}

// 热搜
.hotSearch {
    height: 20rem;
    overflow-y: scroll;
    .title {
    cursor: default;
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 16px;
    font-weight: 600;
  }

  .item {
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 1rem;
    padding-right: 2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 1rem;

    &:hover {
      background-color: #eee;
    }
  }
}
</style>